<template>
  <div style="width: 100%; height: 100%" class="q-pa-sm column captions-panel">
    <div class="body column col" v-if="viewMode === 'edit'">
      <div class="row justify-between items-center q-pa-sm q-ma-sm no-warp">
        <q-btn
          rounded
          :label="$t('studio.bottom.captionButton')"
          color="accent"
          icon="mdi-plus"
          @click="addCaption"
        />
        <q-btn
          dense
          size="sm"
          borderless
          flat
          color="accent"
          :label="$t('studio.captionPanel.textView')"
          @click="viewMode = 'text'"
        />
      </div>
      <q-scroll-area class="col" id="scroller-container">
        <q-virtual-scroll
          ref="scroller"
          :items="captionsByTime"
          scroll-target="scroller-container"
          separator
        >
          <template v-slot="{ item, index }">
            <caption-edit-item :item="item" :index="index" />
          </template>
        </q-virtual-scroll>
      </q-scroll-area>
    </div>
    <div class="body column col" v-else>
      <div class="row items-center q-ma-sm no-warp">
        <q-input
          dense
          class="col"
          rounded
          standout
          v-model="searchString"
          :placeholder="$t('studio.captionPanel.searchCaption')"
        >
          <template v-slot:prepend>
            <q-icon name="mdi-magnify" />
          </template>
        </q-input>
        <q-btn
          class="q-ml-md"
          dense
          size="sm"
          borderless
          flat
          color="accent"
          :label="$t('studio.captionPanel.editView')"
          @click="viewMode = 'edit'"
        />
      </div>
      <q-scroll-area class="col" id="scroller-container">
        <q-virtual-scroll
          ref="scroller"
          :items="captionsByTime"
          scroll-target="scroller-container"
          separator
        >
          <template v-slot="{ item }">
            <caption-item :caption="item" :isActive="activeCueId === item.id" />
          </template>
        </q-virtual-scroll>
      </q-scroll-area>
    </div>
  </div>
</template>
<script setup lang="ts">
import { watch, ref } from 'vue';
import { QVirtualScroll } from 'quasar';
import CaptionEditItem from 'pages/captionStudio/CaptionEditItem.vue';
import CaptionItem from 'pages/captionStudio/CaptionItem.vue';
import { useCaptionStroe } from 'stores/caption-store';
import { storeToRefs } from 'pinia';
const props = defineProps({
  player: {
    type: HTMLVideoElement,
    required: true,
  },
});
const emit = defineEmits(['addCaption']);
const captionStore = useCaptionStroe();
const viewMode = ref('edit');
const searchString = ref('');
const { captionList, activeCueId, captionsByTime } = storeToRefs(captionStore);
const scroller = ref<QVirtualScroll>();
watch(activeCueId, () => {
  if (activeCueId !== null) {
    const index = captionList.value.findIndex(
      (item) => item.id === activeCueId.value
    );
    scroller.value?.scrollTo(index);
  }
});
function addCaption() {
  emit('addCaption');
}
</script>
<style lang="sass" scoped>

.captions-panel
  .body
    background-color: #1c1c1c
</style>
